<template>
	<div class="newPage-contacts">
		<x-header :left-options="{backText: ''}" class="newPage-head">联系人信息</x-header>
		<div class="status">
			<img src="../../assets/msg-imgs/msh_role03.png" />
			<p>你并不是一无所有<br />你还有常联系的Ta</p>
		</div>
		<group class="input-msg">
			<div @click="chooseContacts">
				<x-input label-width="1.5rem" class="fix-label" title="联系人" placeholder="从通讯录选择" :readonly="true">
					<img slot="right" src="../../assets/msg-imgs/cor_right.png" class="vertical-m" style="height: .51rem"/>
				</x-input>
			</div>
			<x-input label-width="1.5rem" title="联系电话" class="fix-label" name="mobile" placeholder="选择联系人后自动识别" keyboard="number" is-type="china-mobile" :required="true"></x-input>
			<x-input label-width="1.5rem" class="fix-label" title="关系" placeholder="请选择您于联系人关系" :readonly="true" >
				<img slot="right" src="../../assets/msg-imgs/cor_right.png" class="vertical-m" style="height: .51rem"/>
			</x-input>
		</group>
		<div class="tip">
			温馨提示：<br />1.请选择常用联系人；<br />2.联系人如果非真实姓名请修改为真实姓名。
		</div>
		<button class="btn-next">下一步</button>
		<div class="contact-user">
			<span>联系客服</span>
		</div>
		<div v-transfer-dom>
	      <confirm v-model="show"
	      :title="'通讯录权限'"
	      confirm-text="设置"
	      @on-cancel="onCancel"
	      @on-confirm="onConfirm"
	      @on-show="onShow"
	      @on-hide="onHide">
	        <p style="text-align:center;">请打开访问通讯录权限，否则无法继续申请流程</p>
	      </confirm>
	    </div>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell, Confirm, TransferDomDirective as TransferDom } from 'vux'
	export default {
		directives: {
		    TransferDom
		},
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell,
	      Confirm
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: false
	      }
	    },
	    methods: {
	    	onCancel () {
		      console.log('on cancel')
		    },
		    onConfirm (msg) {
		      console.log('on confirm')
		      if (msg) {
		        alert(msg)
		      }
		    },
		    onHide () {
	          console.log('on hide')
	        },
	        onShow () {
	          console.log('on show')
	        },
	        chooseContacts() {
	        	this.$set(this.$data, 'show', true)
	        }
	    }
	}
</script>

<style lang="less">
	@import '../styles/main.less';
	body {
		background: #F2F2F2;
	}
	.newPage-contacts {
		.status {
			text-align: center;
			margin-top: .2rem;
			p {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
		.tip {
			color: #909090;
			font-size: .28rem;
			line-height: .4rem;
			padding: .2rem 0 0 .2rem;
		}
		.contact-user {
			margin-top: 1rem;
			text-align: center;
			span {
				font-size: .26rem;
				color: #909090;
			}
		}
	}
</style>